<template>
	<div>
		<!--导航区域-->
		<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a @click="getPicList(items.soid)" :class="['mui-control-item',items.soid==0?'mui-active':'']" v-for="items in sortList" :key="items.soid" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							{{items.soname}}
						</a>
						
					</div>
				</div>
			</div>
			<!--图片区域-->
			<ul>
  				<li v-for="item in picList" :key="item.piid">
    					<img v-lazy="item.piurl+item.pipic">
  				</li>
			</ul>
			
			<!--<div class="pic-name">
				<img src="../../img/1.jpg"/>
				<img src="../../img/2.jpg"/>
			</div>-->
			
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js'
	mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
export default{
	data(){
		return{
			sortList:[],
			picList:[]
		};
	},
	created(){
		this.getPicSort();
		this.getPicList(0);
	},
	methods:{
		getPicSort(){
			this.$http.get('lists/getPicSort').then(result=>{
				this.sortList=result.body.data;
				this.sortList.unshift({soid:0,soname:"推荐"})
				//console.log(this.sortList);
			})
		},
		getPicList(id){
			this.$http.get('lists/getPicList/id/'+id).then(result=>{
				this.picList=result.body.data;
				//console.log(result);
			})
		}
	},
	mounted() {
			mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
	},
}
</script>

<style scoped="scoped">
	ul{
		padding: 0;
		margin: 0;
	}
	li{
		list-style: none;
		background-color: #CCCCCC;
		image[lazy=loading] {
  		width: 40px;
 		height: 300px;
  		margin: auto;
  		}
	}
	ul li img{
		width: 100%;
		height: 100%;
	}
	
	
</style>